// 柱状图top5(1楼-原料鱼累计供应top5、2楼-出库数量top5)

import { useECharts } from '@/hooks/useECharts';
import { EChartsOption } from 'echarts/types/dist/shared.d.ts';
import { useEffect } from 'react';

import type { TopFiveType } from './typing';
interface BarChartProps {
  TopFiveData: TopFiveType.StateType;
}

export const BarChartTopFive = ({ TopFiveData }: BarChartProps) => {
  const { chartRef: barRef, chartInstanceRef: barChart } = useECharts();
  const { xAxisData, seriesData } = TopFiveData;

  useEffect(() => {
    barChart.current?.setOption({
      grid: {
        top: '5%',
        left: '4%',
        right: '5%',
        bottom: '3%',
        containLabel: true,
      },
      legend: {
        show: false,
      },
      tooltip: {
        trigger: 'axis', // 触发类型。
        backgroundColor: '#233346', // 背景色
        borderWidth: 0,
        axisPointer: {
          // 指示器类型。
          type: 'line',
          crossStyle: {
            color: '#fff', // 线的颜色。
          },
        },
        textStyle: {
          color: '#fff',
        },
      },
      xAxis: [
        {
          type: 'value',
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            color: '#697682',
            // formatter: '{value}',
            // margin: 10 // 坐标轴文字距离坐标轴的距离
          },
          max: xAxisData[0],
        },
      ],
      yAxis: [
        {
          type: 'category',
          data: xAxisData,
          // interval: 20, 值之间的间距
          axisLine: {
            // 坐标轴轴线
            show: false,
          },
          axisTick: {
            // 坐标轴刻度
            show: false,
          },
          axisLabel: {
            show: false,
            color: '#697682',
            formatter: '{value}',
            // margin: 10 // 坐标轴文字距离坐标轴的距离
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          // 辅助背景-底色
          // name: '海鲈海鲈',
          type: 'bar',
          barGap: '-100%', // 确保数据系列覆盖整个背景
          barCategoryGap: '0%', // 确保条形间没有间隙
          tooltip: {
            show: false,
          },
          label: {
            show: true,
            position: ['80%', -20],
            distance: 15,
            formatter: (params) => {
              const dataIndex = params.dataIndex;
              return seriesData[0][dataIndex] + ' 千克';
            },
            color: '#BED0DB',
            fontWeight: 'bold',
            fontSize: '.13rem',
            rich: {
              name: {},
            },
          },
          itemStyle: {
            color: '#252E37',
          },
          data: seriesData[1],
          barWidth: '6px',
        },
        {
          // 辅助背景-top
          // name: '海鲈海鲈',
          type: 'bar',
          barGap: '-100%', // 确保数据系列覆盖整个背景
          barCategoryGap: '0%', // 确保条形间没有间隙
          tooltip: {
            show: false,
          },
          label: {
            show: true,
            position: [0, -20],
            distance: 15,
            formatter: (params) => {
              const top = params.name.split(' ')[0];
              return top;
            },
            color: '#1EE7E7',
            fontWeight: 'bold',
            fontSize: '.13rem',
          },
          itemStyle: {
            color: '#252E37',
          },
          data: seriesData[1],
          barWidth: '6px',
        },
        {
          // name: '海鲈海鲈',
          type: 'bar',
          // showBackground: true,
          // stack: 'total',
          label: {
            show: true,
            position: [40, -20],
            distance: 15,
            // align: 'right',
            // verticalAlign: 'middle',
            // rotate: 90,
            // formatter: '{b}',
            formatter: (params) => {
              const name = params.name.split(' ')[1];
              return name;
            },
            color: '#BED0DB',
            fontWeight: 'bold',
            // color: '#BED0DB',
            fontSize: '.13rem',
          },
          tooltip: {
            valueFormatter: function (value) {
              return value as number;
            },
          },
          itemStyle: {
            // color: '#1ED7FF',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: '#288DFF' }, // 0% 处的颜色
                { offset: 1, color: '#1EE7E7' }, // 100% 处的颜色
              ],
              global: false, // 缺省为 false
            },
          },
          data: seriesData[0],
          barWidth: '6px',
        },
      ],
    } as EChartsOption);
  }, [barChart, seriesData, xAxisData]);

  return <div style={{ height: '100%' }} ref={barRef}></div>;
};
